import * as echarts from 'echarts'
export const zhuOptions = {
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'item',
    backgroundColor: '#fff',
    formatter: function (params) {
      return (
        params.marker +
        '<span style="color:' +
        params.color +
        '">' +
        params['name'] +
        '\n' +
        params['value'] +
        '</span>'
      );
    },
  },
  grid: {
    top: '15%',
    right: '3%',
    left: '5%',
    bottom: '12%'
  },
  xAxis: [{
    type: 'category',
    color: '#59588D',
    data: ['学员续费率', '试听课转换率', '课程消费率', '课后评分率', '作业完成率', '班级满班率', '排课上课率', '体验课转化率'],
    axisPointer: {
      type: 'line'
    },
    axisLine: {
      lineStyle: {
        color: '#333'
      }
    },
    axisLabel: {
      margin: 20,
      color: '#333',
      textStyle: {
        fontSize: 12
      },
    },
  }],
  yAxis: [{
    min: 0,
    max: 100,
    axisLabel: {
      // formatter: '{value}%',
      color: '#333',
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#cccccc'
      }
    }
  }],
  series: [{
    type: 'bar',
    data: [100, 90, 10, 90, 90, 20, 56, 89],
    barWidth: '20px',
    itemStyle: {
      normal: {
        color: function (params ){
          if(params.dataIndex == 0){
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FF9B11' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#FFCB48' // 100% 处的颜色
              }], false)
          } else {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#469CFF' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#4CD4F5' // 100% 处的颜色
            }], false)
          }
        },
        barBorderRadius: [30, 30, 0, 0],
      }
    }
  }]
};

export const pieOptions = {
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'item',
    backgroundColor: '#fff',
    formatter: function (params) {
      return (
        params.marker +
        '<span style="color:' +
        params.color +
        '">' +
        params.data['name'] +
        '\n' +
        params.data['value'] +
        '</span>'
      );
    },
  },
  legend: {
    selectedMode: false,
    orient: 'vertical',
    itemWidth: 8,
    itemHeight: 8,
    // icon: 'circle',
    right: '10',
    top: 'top',
    textStyle: {
      fontSize: 16,
      color: '#333',
    },
    data: ['待办', '已办'],
  },
  series: [
    {
      name: '',
      type: 'pie',
      hoverAnimation: false,
      legendHoverLink: false,
      cursor: 'default',
      radius: ['30%', '60%'],
      center: ['50%', '50%'],
      color: ['rgba(211, 139, 2, 0.2)', 'rgba(10, 87, 138, 0.2)'],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      zlevel: 1,
      itemStyle: {
        normal: {
          "borderWidth": 1, // 间距的宽度
          "borderColor": '#fff', //背景色
        },
        ellipsis: {
          borderColor: '#0a1a2a',
        },
      },
      tooltip: {
        show: false,
      },
      data: [
        {
          value: 41,
          name: '',
        },
        {
          value: 80,
          name: '',
        },
      ],
    },
    {
      name: '',
      type: 'pie',
      zlevel: 2,
      cursor: 'default',
      hoverAnimation: false,
      legendHoverLink: false,
      radius: ['30%', '50%'],
      center: ['50%', '50%'],
      color: ['rgba(211, 139, 2, 0.8)', 'rgba(10, 87, 138, .8)'],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        normal: {
          "borderWidth": 1, // 间距的宽度
          "borderColor": '#fff', //背景色
        },
        ellipsis: {
          borderColor: '#0a1a2a',
        },
      },
      tooltip: {
        show: false,
      },
      data: [
        {
          value: 41,
          name: '',
        },
        {
          value: 80,
          name: '',
        },
      ],
    },
    {
      name: 'title',
      type: 'pie',
      zlevel: 3,
      hoverAnimation: false,
      legendHoverLink: false,
      radius: ['30%', '40%'],
      center: ['50%', '50%'],
      color: ['rgba(211, 139, 2, 1)', 'rgba(10, 87, 138, 1)'],
//             label: {
//                 show: true,

//                 formatter: (params) => {
//                     return `
//  ${params.name}: ${params.percent}%
//  ${params.data.value}个
//  `;
//                 },
//                 padding: [0, -30],
//                 textStyle: {
//                     lineHeight: 25,
//                 },
//             },
      labelLine: {
        // show: false,
        // showAbove:true,
        // length: 30,
        // length2: 50,
      },
      itemStyle: {
        "borderWidth": 1, // 间距的宽度
        "borderColor": '#fff', //背景色
      },
      data: [
        {
          value: 41,
          name: '待办',
          label: {
            color: 'rgba(211, 139, 2, 1)',
          },
        },
        {
          value: 80,
          name: '已办',
          label: {
            color: 'rgba(10, 87, 138, 1)',
          },
        },
      ],
    },
  ],
};

